<template lang="pug">
el-dialog(
  custom-class="material-modal"
  :visible.sync="show"
  width="1195px"
  @open="beforeOpen"
  :before-close="close"
  :close-on-click-modal="false"
  v-loading="loading"
  :element-loading-text="loadingText"
  element-loading-spinner="el-icon-loading"
  element-loading-background="rgba(0, 0, 0, 0.8)"
)
  .modal-title.border-bottom(slot="title") 选择视频
  .modal-content(
    
  )
    .content-header
      el-upload(
        action="#"
        :multiple="false"
        accept="video/*"
        ref="styleUpload"
        :show-file-list="false"
        :auto-upload="false"
        list-type="picture"
        :on-change="uploadImage"
      )
        el-button(slot="trigger" size="small" type="primary") 本地上传
    .video-list
      .video-item(v-for="item in list" :key="item.sourceMaterialId")
        .video-item-body(@click="selectMaterial(item)" :class="currentItem.sourceMaterialId === item.sourceMaterialId ? 'active' : ''")
          video.video-item-file(:src="item.fileUrl")
          .video-item-bd
            .video-item-name {{item.title}}
            .video-item-time {{new Date(item.createTime).format('yyyy-MM-dd')}}
  .modal-footer(slot="footer")
    el-pagination(
      background
      layout="prev, pager, next, jumper"
      :total="total"
      :page-size="pageSize"
      @current-change="currentChange"
    )
    .footer-handle
      el-button(size="small" @click="close") 取消
      el-button(size="small" type="primary" @click="confirm") 确定
</template>

<script>
import { FileUpload, getSourceMaterialList } from 'api'
export default {
  name: 'selectMaterialModal',
  props: {
    show: Boolean,
    materialList: Array
  },
  data () {
    return {
      loadingText: '加载中...',
      loading: true,
      list: [],
      currentPage: 1,
      pageSize: 15,
      total: 0,
      currentItem: {}
    }
  },
  methods: {
    beforeOpen () {
      this.list = []
      this.getMaterialList()
    },
    currentChange (page) {
      this.page = page
      this.getList()
    },
    selectMaterial (item) {
      this.currentItem = item
    },
    async fileUpload (raw) {
      return new Promise(async (resolve, reject) => {
        try {
          let formData = new FormData()
          formData.append('Filedata', raw)
          formData.append("applicationId", 4)
          const { ResultSet } = await this.$axios.post(FileUpload, { formData: formData, isUpload: true }, { headers:{ "Content-Type": "multipart/form-data" } })
          resolve({ ...ResultSet.Result[0] })
        } catch (err) {
          console.log(err)
          reject(err)
        }
      })
    },
    async uploadImage (file) {
      try {
        this.loading = true
        this.loadingText = '上传中...'
        const fileItem = await this.fileUpload(file.raw)
        let host = window.location.hostname === '123.58.39.242' || window.location.hostname === '192.168.2.71' ? 'https://ja-material-formal.oss-cn-shenzhen.aliyuncs.com' : 'https://ja-material-test.oss-cn-shenzhen.aliyuncs.com'
        this.loading = false
        this.$emit('change', { fileId: fileItem.fileId, fileUrl: `${host}${fileItem.fileUrl}`, type: 'custom' })
      } catch (err) {
        this.loading = false
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getMaterialList () {
      try {
        this.loading = true
        this.loadingText = '加载中...'
        let query = {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          type: 2
        }
        if (this.activeSpace) query.spaceId = this.activeSpace
        const { ResultSet } = await this.$axios.post(getSourceMaterialList, { ...query })
        this.list = ResultSet.userData.data
        this.total = ResultSet.userData.total
        this.loading = false
      } catch (err) {
        this.loading = false
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    close () {
      this.currentPage = 1
      this.$emit('close')
    },
    confirm () {
      if (this.currentItem && this.currentItem.sourceMaterialId) {
        this.$emit('change', this.currentItem)
      } else {
        this.$message.error('请先选择视频！')
      }
    },
  }
} 
</script>

<style type="text/css" lang="scss">
.material-modal {
  .el-dialog__header {
    border-bottom: 1px solid #EDEDED;
  }
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__footer {
    padding-bottom: 10px;
    border-top: 1px solid #DCDFE6;
  }
}
</style>

<style lang="scss" scoped>
.modal-content {
  
}
.content-header {
  padding: 15px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.video-list {
  display: flex;
  flex-wrap: wrap;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.video-item {
  width: 50%;
  &:nth-child(even) {
    display: flex;
    justify-content: flex-end;
  }
  .video-item-body {
    display: flex;
    width: 539px;
    padding: 27px 32px;
    border: 2px solid transparent;
    &.active {
      border-color: #FF2E42;
    }
    .video-item-file {
      width: 185px;
      height: 123.33px;
    }
    .video-item-bd {
      padding-left: 17px;
      overflow: hidden;
    }
    .video-item-name {
      font-size: 14px;
      line-height: 28px;
      color: #3E4373;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .video-item-time {
      margin-top: 18px;
      font-size: 14px;
      color: #3E4373;
    }
  }
}
</style>
